<template>
  <div class="dateBox">
     <div class="dateButton">
        <el-button size="mini" type="primary" @click="prevMonth">上一月</el-button>
        <el-button size="mini" type="primary" @click="nextMonth" :disabled="isShow">下一月</el-button>
     </div>
    <Chart :cdata="cdata" :time="currentDate"/>
  </div>
</template>

<script>
  import Chart from './chart.vue'
  import {
    platformWaterMoney
  } from '@/api/index'
  import { formatTime } from '@/utils/index.js'
  import handleGetData from '@/mixins/handleGetData'

  export default {
    mixins: [handleGetData],
    data() {
      return {
        areaId: '', //区域id
        cdata: {
          dateList: [],
          waterMoneyList: [],
          waterRatioList: [],
          time:''
        },
        isShow:false,
        currentDate: new Date()
      };
    },
    components: {
      Chart,
    },
    created() {
      this.areaId = localStorage.getItem('areaId')
      this.getData();
      this._handleData()
    },
    mounted() {
      
    },
    methods: {
      // 根据自己的业务情况修改
      getData() {
        const params = {
          areaId: this.areaId,
          date:formatTime(this.currentDate,'yyyy-MM-dd')
        };
        platformWaterMoney(params).then((res) => {
          console.log("res", res)
          const data = res.result
          if (res.code == 200) {
            this.cdata.dateList = data.dateList
            this.cdata.waterMoneyList = data.waterMoneyList
            this.cdata.waterRatioList = data.waterRatioList
            this.cdata.time = this.currentDate
          }
        })
          if(formatTime(this.currentDate,'yyyy-MM-dd') >= formatTime(new Date(),'yyyy-MM-dd')){
            this.isShow = true
          }else{
            this.isShow = false
          }
      },
      
      prevMonth() {
        this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, this.currentDate.getDate());
        // console.log('this.currentDate',formatTime(this.currentDate,'yyyy-MM-dd'))
        this.getData()
      },
      nextMonth() {
        this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, this.currentDate.getDate());
        this.getData()
        // console.log('this.currentDate',formatTime(this.currentDate,'yyyy-MM-dd'))

      }
    }
  };
</script>

<style lang="scss" scoped>
  .dateBox{
    position: relative;
    .dateButton{
      position: absolute;
      right: 40px;
      top: -10px;
      z-index: 99;
    }
  }
</style>